import React, { Component } from 'react'
import { flushSync } from 'react-dom'

export class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Hello World',
      count: 0
    }
  }
  handleMessage() {
    // 方式1：基本用法，底层实现原理其实就是采用Object.assign(this.state, newState)
    // 然后再合适的机会调用render方法
    // this.setState({
    //   message: 'Hello React'
    // })
    // 方式2：回调函数用法
    // this.setState((state, props) => {
    //   // 1. 可以编写一些对新的state的处理逻辑
    //   // 2. 可以获取之前的state和props值
    //   return {
    //     message: 'Hello React'
    //   }
    // })
    // 方式3：setState在React的事件处理中使用一个异步调用
    // this.setState({
    //   message: 'Hello React'
    // }, () => {
    //   console.log('callback', this.state.message) // 新内容
    // })
    // console.log(this.state.message) // 旧内容
    flushSync(() => {
      this.setState({ message: '数据是同步的了' })
    })
    console.log(this.state.message) // 新内容
  }
  render() {
    const { message, count } = this.state
    return (
      <div>
        <p>message: { message }</p>
        <button onClick={() => this.handleMessage()}>修改文本</button>
        <p>count: { count }</p>
        <button>count+1</button>
      </div>
    )
  }
}

export default App